<template>
  <div>
      <NavHeader></NavHeader>
      <NavBread>
        <span>Goods</span>
      </NavBread>
<div class="accessory-result-page accessory-page">
  <div class="container">
    <div class="filter-nav">
      <span class="sortby">Sort by:</span>
      <a href="javascript:void(0)" class="default cur">Default</a>
      <a href="javascript:void(0)" class="price" @click="sortGoods">
        Price 
        <span class="icon-arrow-short" v-if="!sortFlag">↓</span>
        <span class="icon-arrow-short" v-if="sortFlag">↑</span>
      </a>
      <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterTop">Filter by</a>
    </div>
    <div class="accessory-result">
      <!-- filter -->
      <div class="filter stopPop" id="filter" :class="{'filterby-show':filterBy}">
        <dl class="filter-price">
          <dt>Price:</dt>
          <dd><a href="javascript:void(0)" :class="{'cur':priceChecked == 'all'}" 
          @click="checkedAll">All</a></dd>
          <dd v-for="(item,index) in priceFilter" :key="item.startPrice">
            <a href="javascript:void(0)" :class="{'cur':priceChecked==index}"
             @click="checked(index)"
            >{{ item.startPrice }} - {{ item.endPrice }}</a>
          </dd>
        </dl>
      </div>

      <!-- search result accessories list -->
      <div class="accessory-list-wrap">
        <div class="accessory-list col-4">
          <ul>
            <li v-for="item in goodsList" :key="item.productName">
              <div class="pic">
                <a href="#"><img v-lazy="'static/'+item.productImage" alt=""></a>
              </div>
              <div class="main">
                <div class="name">{{ item.productName }}</div>
                <div class="price">{{ item.salePrice }}</div>
                <div class="btn-area">
                  <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                </div>
              </div>
            </li>
          </ul>
          <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="20"  class="load-more">
            <img src="../assets/loading-spinning-bubbles.svg" v-show="loading">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
<Modal :mdShow="mdShow" @close="closeModal">
  <p slot="message">
    请先登录，否则无法加入购物车！
  </p>
  <div slot="btnGroup">
    <a class="btn btn--m" @click="mdShow = false">关闭</a>
  </div>
</Modal>
<Modal :mdShow="mdShowCart" @close="closeModal">
  <p slot="message">
    <svg class="icon-status-ok" style="width:30px; height:30px; padding-right:10px;">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
    </svg>
    <span>加入购物车成功</span>
  </p>
  <div slot="btnGroup">
    <a class="btn btn--m" @click="mdShowCart = false">继续购物</a>
    <router-link class="btn btn--m" to="/cart">查看购物车</router-link>
  </div>
</Modal>
<NavFooter></NavFooter>
</div>
</template>

<script>
import '../assets/css/base.css'
import '../assets/css/product.css'
import NavHeader from '../components/NavHeader'
import NavFooter from '../components/NavFooter'
import NavBread from '../components/NavBread'
import Modal from '../components/Modal'
import axios from 'axios'
export default {
data() {
  return{
    goodsList: [],
    sortFlag:true,
    page:1,
    pageSize:8,
    busy:true,
    loading:false,
    mdShow:false,
    mdShowCart:false,
    priceFilter: [
      {
        startPrice: '0.00',
        endPrice: '100.00'
      },
      {
        startPrice: '100.00',
        endPrice: '500.00'
      },
      {
        startPrice: '500.00',
        endPrice: '1000.00'
      },
      {
        startPrice: '1000.00',
        endPrice: '2000.00'
      }
    ],
    priceChecked: 'all',
    filterBy: false,
    overLayFlag: false
  }
},
components: {
     NavHeader,
     NavFooter,
     NavBread,
     Modal
},
mounted() {
  this.getGoodsList()
},
methods: { 
  //  获取商品数据
  getGoodsList(flag) {
    var param = {
      page: this.page,
      pageSize: this.pageSize,
      sort: this.sortFlag?1:-1,
      priceLevel: this.priceChecked
    }
    this.loading = true
    axios.get('/goods/list',{
      params: param
    }).then((response) => {
      var res = response.data;
      this.loading = false;
      if(res.status == '0') {
      if(flag){
        this.goodsList = this.goodsList.concat(res.result.list)
        if(res.result.count === 0){
          this.busy = true
          this.loading = false
        }else {
          this.busy = false
          this.loading = true
        }
      }else {
        this.goodsList = res.result.list
        this.busy = false
      }
      }else {
        this.goodsList = [];
      }
    })
  },
  //  排序
  sortGoods() {
    this.sortFlag = !this.sortFlag
    this.page = 1;
    this.getGoodsList();
  },
  //  通过index赋值选中当前价格栏
  checked(index) {
    this.priceChecked = index
    this.closePop();
    this.page = 1;
    this.getGoodsList()
  },
  checkedAll() {
    this.priceChecked = 'all'
    this.getGoodsList();
  },
  //  屏幕变窄点击出现蒙版和价格栏
  showFilterTop() {
    this.filterBy = true;
    this.overLayFlag = true;
  },
  closePop() {
    this.filterBy = false;
    this.overLayFlag = false;
  },
  //  滚动分页
  loadMore() {
    this.busy = true
    setTimeout(() => {
      this.page++
      this.getGoodsList(true)
    }, 500);
  },
  //  加入购物车
  addCart(productId) {
    axios.post("/goods/addCart",{
      productId:productId
    }).then((res) =>{
      res = res.data
      if(res.status== '0'){
        this.mdShowCart = true
        this.$store.commit("updataCartCount",1);
      }else{
        this.mdShow = true
      }
    })
  },
  closeModal() {
    this.mdShow = false
    this.mdShowCart = false
  }
}
}
</script>
